<%@ page import="java.text.SimpleDateFormat" %><%--
  Created by IntelliJ IDEA.
  User: Ssw
  Date: 2018-10-11
  Time: 20:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/js/bootstrap.css">
    <link rel="stylesheet" href="/js/bootstrap.min.css">
    <style>
        body{
            width: 1325px;
            height:50%;
            overflow: auto;
        }
        *{
            font-family: 楷体;
        }
        .table{

            text-align: center;
        }
        #exlist{
            width: auto;
            height:500px;
            border:1px solid black;
        }
        .fenye{

            width: 500px;
            border: 0px solid black;
            height: auto;
            text-align: center;
            position: absolute;
            left: 350px;
            top:500px;
            /*margin-top: 350px;
            margin-left: 350px;*/
        }


    </style>
</head>
<body>
<%
    java.text.SimpleDateFormat formatter = new java.text.SimpleDateFormat("yyyy-MM-dd");

    java.util.Date currentTime = new java.util.Date();//得到当前系统时间

    String str_date1 = formatter.format(currentTime); //将日期时间格式化
    String str_date2 = currentTime.toString(); //将Date型日期时间转换成字符串形式
%>

<%--<form id="sss">
     <input  v-model="test">
    <input  v-model="test2">
     <input type="button" @click="ko()">
</form>---%>

<div id="showhide">
    <ul class="breadcrumb">
        <li><a v-on:click = "bianse1()"  v-bind:style = "styleobj">
            <span class="glyphicon glyphicon-search" style="margin-left: 20px;"></span>查询</a></li>
    </ul>
    <div v-show ="show">
        <form class="form-inline" role="form">
            <div class="input-group input-group-lg">
                <%--@keyup="sele()"--%>
                <input ref="idval" style="width: 250px;margin-left: 20px;" type="text"  class="form-control" style="width: 300px;margin-left: 20px;"  placeholder="请输入开发单号">
                <input ref="kehuval" style="width: 250px; margin-left: 20px;" type="text"  class="form-control" style="width: 300px;margin-left: 20px;"   placeholder="请输入客户名称">
                <button type="button" @click="sele()" style="width:100px;height:30px;margin-left: 20px;" class="btn btn-info">查询</button>
            </div>
        </form>
    </div>



</div>
<table class="table table-striped table-bordered table-hover table-condensed test">
    <tr>
        <td>      </td>
        <td>开发单号</td>
        <td>客户</td>
        <td>款式</td>

        <td>款名</td>
        <td>季度</td>
        <td>版型</td>
        <td>件数</td>
        <td>开发状态</td>
        <td>接单日期</td>
        <td>版期</td>
        <td>库存状态</td>
        <td>操作</td>
    </tr>

    <tbody id="exlist">
    <tr v-for="ex in lists">
        <td>      </td>
        <td>{{ex.eorcode}}</td>
        <td>{{ex.clname}}</td>
        <td>{{ex.desname}}</td>
        <td>{{ex.deskuaname}}</td>
        <td>{{ex.seaname}}</td>
        <td>{{ex.planame}}</td>
        <td>{{ex.eornum}}</td>
        <td>{{ex.eoinfostate}}</td>
        <td>{{ex.eordate}}</td>
        <td>{{ex.eoretc}}</td>
        <td>{{ex.storagestate}}</td>
        <td><button data-toggle="modal" data-target="#colormodel" type="button" @click="infoclick(ex.eoinfoid)">入库</button></td>
    </tr>
    </tbody>
</table>

<div id="fanye">
    <ul class="pagination  pagination-lg fenye">
        <li><a @click="shang(1,1)">上一页</a></li>
        <li><a>{{CurrPage}}/{{MaxPage}}</a></li>
        <li><a  @click="xia(1,1)">下一页</a></li>
        <li><a><input  v-model="zzz"  style="width:70px;height: 20px; font-size: 15px;" ref="vals"
                       onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"/>/{{MaxPage}}</a></li>
        <li><a  @click="fan(1,1)">跳转</a></li>

    </ul>
</div>


<%--模态框--%>
<div class="modal fade" style="background-color:rgba(0,0,0,0);"  id="colormodel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="margin-left: 300px;background: #D7D0D7;font-family: 楷体;width: 900px;height:500px;">
        <div class="modal-content" style="background: #D7D0D7;font-family: 楷体;" id="what">
            <div class="modal-body" style="background: #D7D0D7;font-family: 楷体; width: 900px;height:500px;" >
            <div style="border: 0px solid red; width: 880px;height:30px;">
                <label  class="col-sm-2 control-label" style="border: 0px solid black;text-align: center;line-height:25px;width:70px;height: 25px;font-size: 15px;">仓库</label>
                <input  class="form-control" style="float:left;width: 100px;height: 25px;font-size:15px;color:#999999" readonly value="样衣仓">
                <label  class="col-sm-2 control-label" style="float:left;border: 0px solid black;text-align: center;line-height:25px;width:90px;height: 25px;font-size: 15px;">经办人</label>
                <input  class="form-control" style="float:left;width: 120px;height: 25px;font-size:15px;color:#999999" readonly value="样衣仓管理员">
                <label  class="col-sm-2 control-label" style="float:left;border:0px solid black;text-align: center;line-height:25px;width:100px;height: 25px;font-size: 15px;">入库日期</label>
                <input  class="form-control" style="float:left;width: 120px;height: 25px;font-size:15px;color:#999999" readonly value="<%=str_date1%>">
                <label  class="col-sm-2 control-label" style="float:left;border: 0px solid black;text-align: center;line-height:25px;width:100px;height: 25px;font-size: 15px;">入库单号</label>
                <input  id="danhao" class="form-control" style="float:left;width: 160px;height: 25px;font-size:15px;color:#999999" readonly >

            </div>


                <div style="border: 0px solid red; width: 880px;height:420px;overflow: auto">
                    <table class="table">
                        <tr>
                            <th>开发单号</th>
                            <th>颜色</th>
                            <th>尺码</th>
                            <th>数量</th>
                            <th>款号</th>
                            <th>款式</th>
                            <th>版型</th>
                        </tr>
                        <tbody id="chinfo">

                        </tbody>
                    </table>
                </div>

                <div style="border-top: 1px solid white;width: 880px;height: 35px;padding-left: 180px;">
                    <button onclick="add()" class="btn btn-info" style="margin-left: 100px;float: left; width: 100px;height:30px;" type="button" class="btn btn-default" data-dismiss="modal">确定
                    </button>
                    <button style="margin-left: 100px;float: left;width: 100px;height:30px;" type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div>


        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</body>
</html>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Vue.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/vue.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/vue-resource.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/vendor/Blob.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/vendor/Export2Excel.js"></script>


<script>
    $(function(){
        load.fenye(1,null,null);
    })

    Vue.use(VueResource);
    /*var sss=new Vue({
        el:'#sss',
        data:{
         test:"",
            test2:""
        },
        methods:{
            ko:function(){
                alert(this.test2);
            }
        }
    })*/
    //显示隐藏
    var showhide = new Vue({
        el: '#showhide',
        data: {
            show:false,
            show2:false,
            idval:'',
            kehuval:'',


            styleobj :{
                fontSize:'15px',
                color:'#545658'//
            },
            styleobj2 :{
                fontSize:'15px',
                color:'#545658'//
            },
        },
        methods : {
            bianse1:function(){
                this.show=!this.show;
                this.show2=false;
                if (this.styleobj.color=='red'){
                    this.styleobj.color='#545658';
                    this.styleobj2.color='#545658'

                }else{
                    this.styleobj.color='red';
                    this.styleobj2.color='#545658'
                }
            },
            bianse2:function(){
                this.show2=!this.show2;
                this.show=false;
                if (this.styleobj2.color=='red'){
                    this.styleobj2.color='#545658';
                    this.styleobj.color='#545658'
                }else{
                    this.styleobj2.color='red';
                    this.styleobj.color='#545658'
                }
            },
            sele:function(){

                load.fenye(1, showhide.$refs.idval.value,
                    showhide.$refs.kehuval.value);
            },
        }
    });
    //



    var load=new Vue({
        el:'#exlist',
        data: {
            lists:"" , //数据，名称自定
        },
        methods:{
            fenye: function (PageNum,danhao,kehu){
                if(kehu==null){
                    kehu=showhide.$refs.kehuval.value;
                }
                var url = "/tempsto/seleeor"; //   前面要加/
                this.$http.post(url,{danhao:danhao,PageNum:PageNum,kehu:kehu},{emulateJSON:true}).then(
                    function (data) {//ajax请求封装
                        shang.CurrPage= data.body.pageNum;
                        shang.zzz= data.body.pageNum;
                        shang.MaxPage=data.body.pages;
                        this.lists=data.body.list;
                    }
                )},
            infoclick:function(obj){
                var url="/tempsto/selech/"+obj;
                this.$http.post(url).then(function(data){
                    $("#chinfo").html("");
                    $("#danhao").val(data.body[data.body.length-1].storNumber);
                    var tr;
                    for (var a=0;a<data.body.length-1;a++){
                        tr+="<tr>"
                        tr+="<td>"+data.body[a].eorcode+"</td>";
                        tr+="<td>"+data.body[a].tinctname+"</td>";
                        tr+="<td>"+data.body[a].sizename+"</td>";
                        tr+="<td>"+data.body[a].chenum+"</td>";
                        tr+="<td>"+data.body[a].haoname+"</td>";
                        tr+="<td>"+data.body[a].desname+"</td>";
                        tr+="<td>"+data.body[a].planame+"</td>";
                        tr+="</tr>";
                    }


                    $("#chinfo").append(tr);

                /*  data.body.length;
                    console.log(data.bodyText);
                    data.body.splice(1,data.body.length);
                    console.log(data.bodyText);*/
                })

            },
        }
    })
    //
    var shang=new Vue({
        el:'#fanye',
        data:{
            CurrPage:"",//当前页
            MaxPage:"",//最大页数
            vals:"",
            zzz:""


        },
        methods:{
            fan:function(PageNum,danhao){

                if (this.$refs.vals.value==null){
                    this.$refs.vals.value=this.CurrPage;
                }
                if (this.$refs.vals.value==""){
                    this.$refs.vals.value=this.CurrPage;
                }
                if(this.$refs.vals.value>this.MaxPage){
                    this.$refs.vals.value=this.MaxPage;
                }
                //alert(this.$refs.vals.value);
                load.fenye(this.$refs.vals.value,showhide.$refs.idval.value,showhide.$refs.kehuval.value);
            },shang:function(PageNum,danhao){
                if (this.CurrPage-PageNum==0){
                    PageNum=1;
                }else{
                    PageNum=this.CurrPage-PageNum;
                }

                load.fenye(PageNum, showhide.$refs.idval.value,showhide.$refs.kehuval.value);

            },xia:function(PageNum,danhao){
                if (this.CurrPage+PageNum>this.MaxPage){
                    PageNum=this.CurrPage;
                }else{
                    PageNum=this.CurrPage+PageNum;
                }
                // showhide.$refs.testval.value
                load.fenye(PageNum,showhide.$refs.idval.value,showhide.$refs.kehuval.value);

            }
        }
    })


</script>
